<template>

  <div style="margin-bottom: 10px;">
    <el-button size="small"  type="primary" @click="dialogFormVisible=true">添加</el-button>
  </div>

  <el-table  style="width: 100%">

    <el-table-column  label="优惠卷名称" width="180" />
    <el-table-column  label="数量" width="180" />
    <el-table-column  label="有效时间" />
    <el-table-column  label="过期时间" />
    <el-table-column  label="活动开始时间" />
    <el-table-column  label="活动结束时间" />
    <el-table-column  label="优惠卷金额" />
    <el-table-column  label="最小金额" />
  </el-table>

  <!--添加活动框-->
  <el-dialog v-model="dialogFormVisible" :title="添加活动">
    <el-form :model="activity">
      <el-form-item label="名称" label-width="120px">
        <el-input v-model="activity.name" autocomplete="off" />
      </el-form-item>

      <el-form-item label="数量" label-width="120px">
        <el-input v-model="activity.count" autocomplete="off" />
      </el-form-item>


      <div class="demo-date-picker">
      <div class="block">
        <span class="demonstration">有效时间</span>
        <el-date-picker
            v-model="activity.use_start_time"
            type="date"
            format="YYYY/MM/DD"
            placeholder="Pick a day"
            :size="size"
        />
      </div>


      <div class="block">
        <span class="demonstration">过期时间</span>
        <el-date-picker
            v-model="activity.use_end_time"
            type="date"
            format="YYYY/MM/DD"
            placeholder="Pick a day"
            :size="size"
        />
      </div>
      <div class="block">
        <span class="demonstration">活动开始时间</span>
        <el-date-picker
            v-model="activity.start_time"
            type="date"
            format="YYYY/MM/DD"
            placeholder="Pick a day"
            :size="size"
        />
      </div>
      <div class="block">
        <span class="demonstration">活动结束时间</span>
        <el-date-picker
            v-model="activity.end_time"
            type="date"
            format="YYYY/MM/DD"
            placeholder="Pick a day"
            :size="size"
        />
      </div>
      </div>

      <el-form-item label="优惠卷金额" label-width="120px">
        <el-input v-model="activity.discount" autocomplete="off" />
      </el-form-item>

      <el-form-item label="最小金额" label-width="120px">
        <el-input v-model="activity.threshold" autocomplete="off" />
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关&nbsp;&nbsp;闭</el-button>
        <el-button type="primary" @click="save">提&nbsp;&nbsp;交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import request from "@/request/request";
import qs from "qs";
export default {
  name: "ActivityListView",

  data() {
    return {
      activityList: [],
      dialogFormVisible: false,
      activity:{
        name: null,
        count: null,
        discount: null,
        threshold: null,
        end_time: null,
        start_time: null,
        use_end_time: null,
        use_start_time: null
      }
    }
  },
  methods: {
    //添加活动
    save() {
      request({
        method: "post",
        url: "activity-service/activity/add",
        data: qs.stringify(this.activity)
      }).then((respData) => {
        if (respData.code == 200) {
          this.activity = {};
          this.dialogFormVisible = false;
          this.$message({
            message: respData.msg,
            type: 'success'
          });
          //this.loadActivity();
        } else {
          this.$message({
            message: respData.msg,
            type: 'error'
          });
        }
      })
    },
  },
  created() {

  }
}


</script>

<style scoped>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>